<template>
    <div class="tables">
        <div class="tables-div">
            <el-button type="primary" v-authCode.show="B_0149" @click="openAddDialog">新增</el-button>
            <el-button type="primary" v-authCode.show="B_0150" @click="exportExcel" v-preventReClick>
                导出
            </el-button>
            <el-button type="danger" v-authCode.show="B_0151" @click="delData" v-preventReClick>
                删除
            </el-button>
        </div>
        <div class="tables-conter">
            <MantenceTablesLeft @update-right-data="updateRightData" ref="leftTable" />
            <MantenceTablesRight :data="rightTableData" />
        </div>
    </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import MantenceTablesLeft from './mantence-tables-left.vue';
import { IMantenceTablesRightDataItem } from './mantence';
import MantenceTablesRight from './mantence-tables-right.vue';

@Component({
    name: 'MantenceTables',
    components: {
        MantenceTablesRight,
        MantenceTablesLeft,
    },
})
export default class MantenceTables extends Vue {
    private rightTableData: IMantenceTablesRightDataItem[] = [];

    updateRightData(data: IMantenceTablesRightDataItem[]): void {
        this.rightTableData = data || [];
    }

    // 删除选中数据
    delData() {
        (this.$refs.leftTable as any).delSelections();
    }

    // 导出文件
    exportExcel() {
        (this.$refs.leftTable as any).exportExcel();
    }

    // 打开弹窗
    openAddDialog() {
        (this.$refs.leftTable as any).openDialog('add');
    }
}
</script>
<style lang="scss" scoped>
.tables {
    .tables-div {
        border: 1px solid #eee;
        padding: 8px;
    }

    .tables-conter {
        display: flex;
        position: relative;
        height: calc(100vh - 130px);
        margin-top: 10px;
        border: 1px solid #eee;
    }
}
</style>
